<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>绑定手机</title>
    <link rel="stylesheet" href="../resources/css/public/reset.css" />
    <link rel="stylesheet" href="../resources/css/person/head.css" />
    <link rel="stylesheet" href="../resources/css/person/modify_mobile.css" />
</head>
<body>
<!--头部-->
<header class="bxg-header">
    <a class="bxg-head-icon bxg-back" href="javascript:history.go(-1);"></a>
    绑定新手机号
</header>

<div class="bxg-content new-mobile">
    <div>我们将验证码发送到您的手机上</div>
    <div class="inp-new-mobile bxg-between">
        <span>新的手机号</span>
        <input type="tel" name="mobile" placeholder="输入新的手机号" value=""/>
    </div>
    <div class="bxg-submit">下一步</div>
</div>
<div class="bxg-alert-tip"></div>
<script type="text/javascript" charset="UTF-8" src="../resources/js/common/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../resources/js/person/public.js" ></script>
<script type="text/javascript">
    $(function(){
        $(".bxg-submit").click(function(){
            var mobile = $("[name='mobile']").val();
            if(mobile == ''){
                $(".bxg-alert-tip").html("手机号不能为空").show();
                setTimeout(function(){
                    $(".bxg-alert-tip").fadeOut();
                },2000);
            }else if(!(/^1[34578]\d{9}$/.test(mobile))){
                $(".bxg-alert-tip").html("手机号输入格式不正确").show();
                setTimeout(function(){
                    $(".bxg-alert-tip").fadeOut();
                },2000);
            }else{
                var url = '/person/sendPhoneCode?type=register&phone='+mobile;
                $.getJSON(url,function (data) {
                    if (data.success) {
                        //发送成功则跳转到填写验证码的页面中
                        window.location.href = "/person/verifyCode?phone="+mobile;
                    }else {
                        $(".bxg-alert-tip").html(data.message).show();
                    }
                })
            }
        });

    })
</script>
</body>
</html>
